<template>
	<view class="ringEcharts">
		<view class="charts-box">
			<qiun-data-charts type="ring" :chartData="chartData" :errorShow="false" background="none" />
		</view>
		<view class="iDow" v-for="(item,index) in itemList" :key='index'>
			<view class="left">
				<u-badge :isDot="true" bgColor='#2979ff'></u-badge>
				<u--text text="销控" color='#303133' margin='0 0 0 15rpx'></u--text>
			</view>
			<view class="left">
				<u--text text="40" color='#909193' margin='0 40rpx 0 0'></u--text>
				<u--text text="40.2%" color='#909193'></u--text>
			</view>
		</view>
	

	</view>


</template>

<script>
	export default {
		data() {
			return {
				itemList:[{
					name:"销控",
					num:30
				},{
					name:"销控",
					num:30
				},{
					name:"销控",
					num:30
				},{
					name:"销控",
					num:30
				},{
					name:"销控",
					num:30
				},{
					name:"销控",
					num:30
				},{
					name:"销控",
					num:30
				},{
					name:"销控",
					num:30
				},{
					name:"销控",
					num:30
				}],
				chartData: {},

			}
		},


		created() {

			//模拟从服务器获取数据
			this.getServerData()
		},
		mounted() {

		},
		methods: {
			getServerData() {
				setTimeout(() => {
					//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
					//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
					this.chartData = {
						"series": [{
							"data": [{
								"name": "一班",
								format: 'yAxisDemo1',
								"value": 50
							}, {
								"name": "二班",
								"value": 30
							}, {
								"name": "三班",
								"value": 20
							}, {
								"name": "四班",
								"value": 18
							}, {
								"name": "五班",
								"value": 8
							}],
							format: 'yAxisDemo1'
						}],

					}
				}, 500);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.ringEcharts{
		padding: 10rpx 80rpx 20rpx;
		.charts-box {
			padding: 20rpx;
			width: 400rpx;
			height: 200px;
		}
		.iDow{
			display: flex;
			margin-bottom: 20rpx;
			justify-content: space-between;
			align-items: center;
			.left{
				display: inline-flex;
				justify-content: flex-start;
				align-items: center;
			}
		}
	}
	
</style>
